<template>
    <transition name="fade">
        <div class="login"></div>
    </transition>
</template>

<script>
import { Dialog, Toast } from "vant";
import { mapMutations } from "vuex";
export default {
    name: "Login",
    data() {
        return {
            redirect: "/",
        };
    },
    mounted() {
        localStorage.setItem(
            "_token_",
            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93ZWNoYXR3b3JrLmloZy5jb20uY246ODA4NVwvYXBpXC9sb2dpbiIsImlhdCI6MTY0NzU4OTkxOCwiZXhwIjo1MjQ3NTg5OTE4LCJuYmYiOjE2NDc1ODk5MTgsImp0aSI6IkRyNFJNRzNsaWd6enpFVmgiLCJzdWIiOjMsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.GFERebFkC7x0S1DtAb7otZbWa5ipBserjXUKIVYSUdw"
        );
        localStorage.setItem(
            "_userInfo_",
            JSON.stringify({
                id: 3,
                name: "Weiyi Zhou",
                type: 1,
                userid: "PaiPai",
                department: '["6986"]',
                gender: 1,
                avatar: "http://wework.qpic.cn/bizmail/G63W5bwreHovF12BlkJcTibeA9pc7HSsqGx4qpO55sJs47I0ibXk2NFA/0",
                english_name: "周伟一",
                email: "914044753@qq.com",
                mobile: "18225697952",
                is_delete: 0,
                position: "Sales & Marketing Leader",
                last_login_at: null,
                updated_at: "2022-03-18 15:51:58",
                created_at: "2022-03-17 10:35:36",
                hotel_id: 449,
                merlin_id: null,
                plan_count_1: 0,
                room_count_1: 0,
                region: "North China",
                token:
                    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93ZWNoYXR3b3JrLmloZy5jb20uY246ODA4NVwvYXBpXC9sb2dpbiIsImlhdCI6MTY0NzU4OTkxOCwiZXhwIjo1MjQ3NTg5OTE4LCJuYmYiOjE2NDc1ODk5MTgsImp0aSI6IkRyNFJNRzNsaWd6enpFVmgiLCJzdWIiOjMsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.GFERebFkC7x0S1DtAb7otZbWa5ipBserjXUKIVYSUdw",
            })
        );
        window.location.replace(process.env.VUE_APP_HOME);
    },
    methods: {
        ...mapMutations(["SET_TYPE", "SET_INFO", "SET_PLAN_TYPE", "SET_TAB_TYPE"]),
        login() {
            let appid = "wwdc0bc731d475dfb8";
            let redirect_uri = process.env.VUE_APP_URL;
            let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${encodeURI(
                appid
            )}&redirect_uri=${encodeURI(redirect_uri)}&response_type=code&scope=snsapi_base#wechat_redirect`;
            window.location.replace(url);
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return false;
        },
        getLogin(code) {
            this.$api
                .login(code)
                .then((res) => {
                    Toast.clear();
                    if (res.status_code == 400) {
                        Dialog({ message: res.message });
                        return;
                    }
                    if (!res.data.userid) {
                        Dialog({ message: res.message });
                        return;
                    } else {
                        localStorage.setItem("_token_", res.data.token);
                        localStorage.setItem("_userInfo_", JSON.stringify(res.data));
                        window.location.replace(process.env.VUE_APP_HOME);
                    }
                })
                .catch((e) => {
                    console.log(e);
                    Toast("接口错误");
                });
        },
    },
    watch: {
        $route: {
            handler: function(val) {
                this.redirect = val?.query?.redirect;
            },
            immediate: true,
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: white;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
    transform: translateX(100%);
}
</style>
